<template>
  <div style="width: 100%;background: #F0F0F0" class="fxCol fxCenCen">

    <div class="fx" style="margin-left: 16px;padding-top: 16px;margin-bottom: 20px">
      <el-button plain @click="getPdf">下载</el-button>
    </div>

    <div id="pdfContent" class="jl_main fxCenCen" style="width: 820px">

      <div class="jl_content">

        <!--我的信息-->
        <div class="jl_user fxCenCen">
          <div style="width: 600px;">
            <div class="fxStaCen ">
              <div style="font-size: 35px;font-weight: bold;color: #545454;">王永吉</div>
              <div style="margin-left: 30px;color: #444343;margin-top: 13px">意向岗位：项目经理</div>
            </div>

            <div class="fxStaCen fxWrap" style="color: #545454;margin-top: 30px">
              <div class="fxStaCen jl_user_info">
                电话：15144042132
              </div>
              <div class="fxStaCen jl_user_info">
                邮箱：15144042132@163.com
              </div>
              <div class="fxStaCen jl_user_info">
                性别/年龄：男/29
              </div>
              <div class="fxStaCen jl_user_info">
                工作年限：6.5年（2017/9）
              </div>
              <div class="fxStaCen jl_user_info">
                身高/体重：172cm/65kg
              </div>
              <div class="fxStaCen jl_user_info">
                现住址：长春市 宽城区 长白路
              </div>
            </div>
          </div>
          <div class="fx1"></div>

          <img src="./img/head2.png" alt="" class="jl_img">
        </div>

        <!--内容-->
        <div class="jl_user_bt">

          <!--求职意向-->
          <div class="jl_item">
            <div class="fxStaCen">
              <div class="fxCenCen jl_icon">
                <img src="./img/qiuzhi2.png" alt="" style="width: 17px;height: 17px">
              </div>
              <div class="jl_icon_txt">求职意向</div>
              <div class="jl_icon_line fx1"></div>
            </div>

            <div class="fxStaCen fxWrap jl_b0102">
              <div class="fxStaCen jl_user_info">
                意向岗位: 项目经理
              </div>
              <div class="fxStaCen jl_user_info">
                意向城市: 长春市
              </div>
              <div class="fxStaCen jl_user_info">
                期望薪资: 面议
              </div>
              <div class="fxStaCen jl_user_info">
                求职类型: 社招
              </div>
              <div class="fxStaCen jl_user_info">
                期望行业: WEB/APP/小程序
              </div>
              <div class="fxStaCen jl_user_info">
                当前状态: 随时到岗
              </div>
            </div>

          </div>

          <!--软考证书-->
          <div class="jl_item">
            <div class="fxStaCen">
              <div class="fxCenCen jl_icon">
                <img src="./img/zhengshu.png" alt="" style="width: 19px;height: 19px">
              </div>
              <div class="jl_icon_txt">软考证书</div>
              <div class="jl_icon_line fx1"></div>
            </div>

            <div class="fxStaCen fxWrap jl_b0102">
              <div class="fxStaCen jl_user_info f15" style="color: #000;font-weight: bold">
                高项：信息系统项目管理师（2021/5）
              </div>
            </div>

          </div>

          <!--教育经历-->
          <div class="jl_item">

            <div class="fxStaCen">
              <div class="fxCenCen jl_icon">
                <img src="./img/jiaoyu.png" alt="" style="width: 19px;height: 19px">
              </div>
              <div class="jl_icon_txt">教育经历</div>
              <div class="jl_icon_line fx1"></div>
            </div>

            <div style="padding: 5px 23px;">
              <div style="color: #5b5a5a;margin-top: 5px;line-height: 23px">
                <span class="f15" style="color: #000;font-weight: bold">【长春理工大学 软件工程 本科】</span>
                <br>
                <span class="f14">【学信网在线验证地址】</span>
                https://www.chsi.com.cn/xlcx/bg.do?vcode=AN58CSN1WDMK18NW&trnd=04361691431804444069162910324930&srcid=archive
                <br>
                <!--                <br>-->
                <!--                <span-->
                <!--                    style="color: #000;font-weight: bold">【2015.09-2018.07 吉林电子信息职业技术学院】软件技术 / 专科 </span>-->
                <!--                <br>-->
                <!--                【<span class="f16">学信网</span>】https://www.chsi.com.cn/xlcx/bg.do?vcode=861562733301&trnd=06558014305895497042865210340112&srcid=archive-->
                <!--                <br>-->
                <!--                <br>-->
                <div style="color: #000;font-weight: bold;margin-top: 6px">
                  <span class="f15">【在校经历】</span>
                  <br>
                  &nbsp;&nbsp;&nbsp;主修课程：JavaWeb、Android
                  <br>
                  &nbsp;&nbsp;&nbsp;2018 优秀毕业生、
                  &nbsp;2018 吉林省 省级奖学金、
                  &nbsp;2017 信息技术学院 一等奖学金
                  <br>
                  &nbsp;&nbsp;&nbsp;2017 吉林省 移动互联软件开发 一等奖、
                  &nbsp;2017 全国职业大赛 联想杯 团体组移动软件开发 三等奖
                  <br>
                  &nbsp;&nbsp;&nbsp;2016 吉林省 第十届 ACM 程序设计大赛 三等奖、
                  &nbsp;2016 吉林省 移动智能交通 二等奖
                </div>
              </div>
            </div>

          </div>

          <!--工作经验-->
          <div class="jl_item">

            <div class="fxStaCen">
              <div class="fxCenCen jl_icon">
                <img src="./img/jiaoyu.png" alt="" style="width: 19px;height: 19px">
              </div>
              <div class="jl_icon_txt">能力总结</div>
              <div class="jl_icon_line fx1"></div>
            </div>

            <!--开发范围-->
            <div class="jl_yd_pd">
              <div class="jl_time fxCenCen">
                <div class="jl_yd"></div>
                <div>入职优势</div>
                <div class="fx1"></div>
              </div>
              <div class="pdl10 jl_sub_txt">
                <div class="jl_yd2"></div>
                已获得软考高项证书：信息系统项目管理师（2021/5）<br>
                <div class="jl_yd2"></div>
                具备项目完整生命周期管理经验(需求、研发、测试、生产、交付与运维) <br>
                <div class="jl_yd2"></div>
                掌握项目十大管理理论知识(整体、范围、进度、成本、质量、人力、沟通、干系人、采购) <br>
                <div class="jl_yd2"></div>
                项目开发任务WBS拆解、任务分配与验收、预估成本与开发时间、 员工培训 <br>
                <div class="jl_yd2"></div>
                云服务从0搭建流程经验（天翼云、阿里云） <br>
                <div class="jl_yd2"></div>
                云服务项目整体迁移经验（阿里云迁移到华为政务云） <br>
                <div class="jl_yd2"></div>
                自建Gitlab 、 自建Nexus、Git多分支开发与冲突解决 <br>
                <div class="jl_yd2"></div>
                Jenkins自动化部署环境搭建，持续交付（Jenkins + Git + Java + Maven + Nodejs）
              </div>
            </div>

            <!--开发范围-->
            <div class="jl_yd_pd">
              <div class="jl_time fxCenCen">
                <div class="jl_yd"></div>
                <div>开发范围</div>
                <div class="fx1"></div>
              </div>
              <div class="pdl10 jl_sub_txt">
                服务端（Java）、Web端（Vue/Angular）、移动端(原生Android/uniapp/手持PDA)、
                微信小程序(原生/uniapp)、运维(Centos/Docker/Jenkins/Nginx)
              </div>
            </div>

            <!--项目经历-->
            <div class="jl_yd_pd">
              <div class="jl_time fxCenCen">
                <div class="jl_yd"></div>
                <div>项目简介</div>
                <div class="fx1"></div>
              </div>
              <div class="pdl10 jl_sub_txt" style="line-height: 25px">
                <span class="jl_sub_title">【信息系统】</span>
                仓库管理系统(入库、盘库、定位、审批)(后端开发)、教学管理系统(学生信息、教师信息、课程维护)(后端开发)
                <br>

                <span class="jl_sub_title mgt8"> 【电商项目】</span>
                常规模式自营自销(Android端开发) 、多店铺+供应链(全栈开发) 、社区团购电商(前端开发) 、汽车销售项目(服务端开发)
                <br>

                <span class="jl_sub_title mgt8"> 【物联网】</span>
                物联网厂区定位系统(物理基站+信号发射器+Web管理系统+canvas绘制)(全栈开发) 、
                仓库管理系统(PDA手持设备开发：出库、入库、扫件、盘库)(管理后台：入库、盘库、定位、审批)（全栈开发）
                <br>

                <span class="jl_sub_title mgt8"> 【其他】</span>
                小程序会议(仿 微信聊天+腾讯会议)（1v1实时通讯、通讯录、群聊、多人语音会议(SRS+RTMP)）(全栈开发)、微信Web抽奖小游戏（Web页面+管理后台）（全栈开发）
              </div>
            </div>

            <!--技术范围-->
            <div class="jl_yd_pd">
              <div class="jl_time fxCenCen">
                <div class="jl_yd"></div>
                <div>常用技术</div>
                <div class="fx1"></div>
              </div>
              <div class="pdl10 jl_sub_txt">
                【服务端】SpringBoot、MyBatisFlex/MyBatisPlus、自定义 RBAC 权限框架(JWT 实现)、Git、Maven、
                Gradle
                <br>【前端】Vue3+ts+Vite3+ElementUI、Angular、AngularJS、H5/CSS/JS/TS、AntDesign
                <br>【移动端】uniapp、微信小程序、Android（java/kotlin）、PDA、
                <br>【数据存储】MySQL8.x、Minio、Redis、Oracle
                <br>【部署/运维】Centos、WinServer、Jenkins、Docker、Nginx
                <br>【开发工具】
                IDEA、WebStorm、Navicat、Xshell
                、SublimeText、Typora、VirtualBox、Postman、Xmind、Axure、VMware+
                <br>【其他接触】Python、C#、Android、UniApp、Kotlin、SpringCloud、SSH、SSM（老项目维护）、 Oracle、RocketMQ、ES
                搜索引擎、MyCat、区块链、大数据
              </div>
            </div>

            <!--出差经历-->
            <div class="jl_yd_pd">
              <div class="jl_time fxCenCen">
                <div class="jl_yd"></div>
                <div>出差经历</div>
                <div class="fx1"></div>
              </div>
              <div class="pdl10 jl_sub_txt">
                佛山、南京
              </div>
            </div>
          </div>

          <!--项目经历-->
          <div class="jl_item">

            <div class="fxStaCen">
              <div class="fxCenCen jl_icon">
                <img src="./img/jiaoyu.png" alt="" style="width: 19px;height: 19px">
              </div>
              <div class="jl_icon_txt">项目经历</div>
              <div class="jl_icon_line fx1"></div>
            </div>
            <div class="jl_yd_pd">
              <div class="jl_time fxCenCen">
                <div class="jl_yd"></div>
                <div>《绿添商城、绿添小程序会议》</div>
                <div class="fx1"></div>
              </div>
              <div class="pdl10 jl_sub_txt">
                <span class="jl_title3">职位:</span> 项目经理 <br>
                <span class="jl_title3">团队:</span> 4人（后端开发2人、运维1人，美工1人）<br><br>
                <span class="jl_title3">项目介绍:</span><br>
                <div class="jl_yd3"></div>
                绿添商城：多功能电商项目、多店铺、集成供应链、二级分销 、APP(已上架、应用宝、小米、华为、荣耀、OPPO、VIVO)、小程序(已上线)
                <br>
                <div class="jl_yd3"></div>
                绿添小程序会议:（仿 微信聊天+腾讯会议）（1v1实时通讯、群聊、多人语音会议(SRS+RTMP推流)）
                <br>
                <br>
                <span class="jl_title3">核心业务:</span>
                <br>
                自营商品与订单、供应链商品与订单、微信支付、售后、物流、交易数据统计
                <br><br>
                <span class="jl_title3">增值业务:</span>
                <br>
                签到积分、积分换购、抢购商品活动、购物奖励贡献值、贡献值充值、小程序直播会议、创业学习、一街一店
                <br>
                <br>
                <span class="jl_title3">负责内容:</span><br>
                <div class="jl_yd3"></div>
                需求调研、框架搭建、任务分配、代码开发、测试、部署上线、小程序上架、APP上架主流商店、上线后维护<br>
                <div class="jl_yd3"></div>
                项目压测（最终结果为 2k并发秒级响应，2W堆积）<br>
                <div class="jl_yd3"></div>
                服务器购买配置：（32C+32G）x2; 带宽:300Mbps
              </div>
            </div>

            <div class="jl_yd_pd">
              <div class="jl_time fxCenCen">
                <div class="jl_yd"></div>
                <div>《一汽智能定位系统》</div>
                <div class="fx1"></div>
              </div>
              <div class="pdl10 jl_sub_txt">
                职位: 项目经理 <br>
                团队: 6 人（产品、开发、测试、硬件、第三方）<br><br>
                项目介绍:<br>
                为一汽“五地六场”生产车辆做定位服务，厂区内部车辆从 CP7 下线至 CP8 出厂的环节中，存在出现
                故障的情况需要进行返修；
                过程中需要实时查看厂区内部地图，监控车辆实时位置，历史轨迹。
                可以自由绘制电子围栏区域，特定区域可以开启报警功能。
                需要对检修数据进行统计获取员工的检修效率，并为指定位置配送返修所需零件，到指定工位。
                <br> <br> 核心业务:<br>
                1.基站定位：
                根据实际情况采用 fabric.js 绘制厂区地图；
                通过服务读取基站数据，实现车辆实时定位功能、历史轨迹查询；
                绘制电子围栏区域，提供标签报警功能；
                盘点功能：对于当前时刻所有车辆和电子标签信息进行记录
                （各个区域的车辆分布情况、电子标签情况）
                <br>2.数据统计；员工工时、效率、车辆修复缺陷、等数据报表<br>
                3.根据车辆缺陷，自动分配返修零件到指定工位，有员工人为收取。<br><br>
                负责内容:<br>
                1.代码开发：服务端，WEB、微信端、PDA<br>
                2.环境搭建：框架，数据库，测试环境，项目部署<br>
                3.定位服务开发难点：软硬结合（点位轨迹数据整理），数据同步延迟，cavas 地图绘制方向、定位<br>
                点方向、偏移量、地图配置等问题<br>
                4.同步大众内部接口实时车辆数据<br>
                5.基站硬件设备与软件服务的布控与部署，第三方前往现场安装与调试<br>
                6.后期文档维护，项目建设方案（背景概述、结构设计、功能设计、页面设计、数据规范设计、网络
                安全设计）
              </div>
            </div>

            <div class="jl_yd_pd">
              <div class="jl_time fxCenCen">
                <div class="jl_yd"></div>
                <div>《刘晓敏社区团购项目》</div>
                <div class="fx1"></div>
              </div>
              <div class="pdl10 jl_sub_txt">
                职位: Vue 前端开发、小程序开发<br>
                团队: 7 人（产品 1 人、后端开发 3 人、前端+小程序 2 人，测试 1 人）<br><br>
                项目介绍:<br>
                社区团购项目，线下存在实体店，在小区内部选择团长，自选采购渠道，成团后指定司机进行
                配送
                主要盈利模式采用“商品直销”：以“团购”的名义直接在网站上登陆商品信息进行直接销售，
                货源可以是自己进货、或跟商家合作代销，直接获得商品销售利润。
                <br> <br>开发内容:<br>
                PC 端（商品、组合商品、规格类目、团长、供货商、二级商户、银联开户、司机）<br>
                司机端: 司机配送（配送、签收）、查看路线、统计收益、签约灵活用工<br>
                团长端: 配送签收、扫码核销、数据看板、订单信息、成团进度<br>
                商品库、售后审核、我的客户、收益、提现、签约灵活用工
              </div>
            </div>

            <div class="jl_yd_pd">
              <div class="jl_time fxCenCen">
                <div class="jl_yd"></div>
                <div>《长春沙龙 VMS 系统》</div>
                <div class="fx1"></div>
              </div>
              <div class="pdl10 jl_sub_txt">
                职位: Java服务端开发<br><br>
                项目介绍:
                对于长城沙龙机甲汽车，从生产到销售所产生的一系列信息，进行维护与报表统计<br><br>
                核心业务:
                信息录入与维护
                公司、车辆、计划、发运、订单、库存、财务、销售、第三方接口对接<br>
                <br> 开发内容:<br>
                第三方接口对接,通过 http 发送请求的方式，在白名单网络内
                与多个第三方系统（MES、APS、GBOM、WMS、TMS...），进行数据对接<br>
                如：
                主动调用：同步品牌数据、同步实销数据、发送出库单、更新发运计划
                被动接收：接收订单、修改发运地址、处理申请退货
              </div>
            </div>

            <div class="jl_yd_pd">
              <div class="jl_time fxCenCen">
                <div class="jl_yd"></div>
                <div>《吉林省鹰路科技有限公司》</div>
                <div class="fx1"></div>
              </div>
              <div class="pdl10 jl_sub_txt">
                职位：JavaWeb 全栈开发、Android 开发<br>
                项目列表：<br>
                1.《人社局大数据平台项目》：大数据开发环境 CDH 搭建与维护、各处室数据库中数据关系梳理<br><br>
                2.《建行龙卡新年开卡活动》：前后台功能开发、测试部署、3 个月维护<br><br>
                3.《团市委门户网站项目维护》：服务器迁移、数据库迁移、日常维护<br>
                <br>
                4.《无人值守库房》：PDA 开发、PDA 对应后台服务接口开发、微信端功能开发<br>
                描述：实现仓库货物的自动化出入库减少成本<br>
                平台端：微信端+后台管理+PC 端+PDA 端<br>
                技术：Springboot mybatis mysql angularjs Aadroid Oracle<br>
                PDA 架构：MVP，负责模块：PDA +后台服务 ，开发语言 Kotlin
                技术包含: koltin android okttp3 Retrofit2+rxjava2+rxkotlin
                功能模块: 入库 出库 盘库 备件移位 开关读写器 标签录入
                PDA 后台开发,出库 入库 盘库
                服务端：移动端对应的服务：入库 出库 盘库 备件移位 开关读写器 标签录入
                PC 端启动读写器服务，PC 端页面功能编写<br><br>
                5.《阿凡优选 App》：Android 端开发
                描述: 电商 APP,线下走访获取商品，录入后线上销售，主打扶贫的 APP<br>
                开发语言:java Android 原生开发<br>
                架 构 : MVC<br>
                负责模块: 设计架构， 独立开发 时长 5 个月<br>
                主要功能:普通登录 手机登录 注册
                商品展示，收藏，购买
                秒杀，微信付款，退款
                物流信息查询，视频播放，轮播广告等功能
              </div>
            </div>

            <div class="jl_yd_pd">
              <div class="jl_time fxCenCen">
                <div class="jl_yd"></div>
                <div>《实习：安徽金科安信息技术有限公司》</div>
                <div class="fx1"></div>
              </div>
              <div class="pdl10 jl_sub_txt">
                职位：全栈开发 <br>
                开发内容：旧吉林移动门户网站 SSM 项目维护与二次开发<br>
                1.吉林移动和生活 SSH 开发维护<br>
                2.易农宝 App Jfinal+H5 前后端 开发 维护<br>
                3.微信小程序 入门<br>
                4.iptv 魔盒 开发 测试<br>
              </div>
            </div>

          </div>

          <!--工作经历-->
          <div class="jl_item">

            <div class="fxStaCen">
              <div class="fxCenCen jl_icon">
                <img src="./img/jiaoyu.png" alt="" style="width: 19px;height: 19px">
              </div>
              <div class="jl_icon_txt">工作经历</div>
              <div class="jl_icon_line fx1"></div>
            </div>

            <div style="padding: 5px 23px;">
              <div style="color: #5b5a5a;margin-top: 5px;line-height: 23px">
                <span style="color: #000;font-weight: bold">【2023-03～至今 百均（吉林）科技】 </span>
                <br>
                &nbsp;&nbsp;&nbsp;职位：项目经理
                <br>
                &nbsp;&nbsp;&nbsp;团队：4人（后端开发2人、运维1人，美工1人）
                <br>
              </div>
            </div>

            <div style="padding: 5px 23px;">
              <div style="color: #5b5a5a;margin-top: 5px;line-height: 23px">
                <span style="color: #000;font-weight: bold">【2022-07～2023-1 吉林省小河信息技术有限公司】 </span>
                <br>
                &nbsp;&nbsp;&nbsp;职位：Vue 前端开发、小程序开发
                <br>
                &nbsp;&nbsp;&nbsp;团队：7人（产品 1人、后端开发 3人、前端+小程序 2人，测试 1人）
                <br>
              </div>
            </div>

            <div style="padding: 5px 23px;">
              <div style="color: #5b5a5a;margin-top: 5px;line-height: 23px">
                <span style="color: #000;font-weight: bold">【2021-05～2022-02 惠科工业自动化】</span>
                <br>
                &nbsp;&nbsp;&nbsp;职位：项目经理
                <br>
                &nbsp;&nbsp;&nbsp;团队：6人（产品 1人、开发 3人、测试 1人、硬件 1人、第三方（若干））
                <br>
              </div>
            </div>

            <div style="padding: 5px 23px;">
              <div style="color: #5b5a5a;margin-top: 5px;line-height: 23px">
                <span style="color: #000;font-weight: bold">【2017-12～2021-03 吉林省鹰路科技有限公司】 </span>
                <br>
                &nbsp;&nbsp;&nbsp;职位：Java 全栈、Android开发、项目组长
                <br>
                &nbsp;&nbsp;&nbsp;团队：10人（Java服务端 2人、测试 2人、Android 2人、IOS 1人、设计 2人、美工 1人）
                <br>
              </div>
            </div>

          </div>
        </div>

      </div>

    </div>

  </div>
</template>

<script setup>
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
import {getCurrentInstance, onMounted} from "vue";
import {closeLoading, showLoading} from "@/common/utils/kit";

const {proxy} = getCurrentInstance();

function getPdf() {
  showLoading("正在生成...")
  let fileName = "王永吉-java-简历";
  html2Canvas(document.querySelector('#pdfContent'),
      {
        allowTaint: true,
        //防止页面过宽导致右侧出现黑灰色背景区域
        scale: 2
      }
  ).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        //A4纸张标准宽高进行转换
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let PDF = new JsPDF('', 'pt', 'a4')
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        //文件导出生成
        PDF.save(fileName + '.pdf')
        closeLoading()
      }
  )
}

//页面加载完成回调
onMounted(() => {
  // 更新窗口Title
  document.title = "简历";
})
</script>

<style lang="less">

:root {
  --content: #FFFFFF;
  --mainBack: #F5F7F9;
  --userBack: #EbEfFB;
  --main: #2E51DB;
  --line: #2E51DB40;
  --colorDef: #444343;
}

.jl_main {
  overflow-x: hidden;
  background: var(--mainBack);
}

.jl_content {
  font-size: 14px;
  width: 100%;
  background: var(--content);
}

.jl_user_bt {
  padding: 30px 40px;
}

.jl_user {
  padding: 20px 50px;
  background: var(--userBack);
}

.jl_user_info {
  line-height: 25px;
  width: 50%;
}

.jl_icon {
  margin-right: 8px;
  border-radius: 100px;
  width: 35px;
  height: 35px;
  background: var(--main);
}

.jl_dian3 {
  margin-right: 8px;
  border-radius: 100px;
  width: 35px;
  height: 35px;
  background: var(--main);
}

.jl_icon_txt {
  font-weight: bold;
  font-size: 18px;
  color: var(--main);
}

.f16 {
  font-size: 16px;
}

.f14 {
  font-size: 14px;
}

.f15 {
  font-size: 15px;
}

.jl_icon_line {
  height: 1px;
  margin-left: 25px;
  background: var(--line);
}

.jl_yd {
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 100px;
  background: var(--main);
}

.jl_yd2 {
  margin-bottom: 3px;
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 100px;
  background: var(--colorDef);
}

.jl_yd3 {
  margin-bottom: 2px;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 100px;
  background: var(--colorDef);
}

.jl_yd_pd {
  padding: 5px 23px;
}

.jl_time {
  margin-top: 6px;
  font-size: 15px;
  font-weight: bold;
  color: var(--main);
}

.jl_title3 {
  color: #000;
  font-size: 15px;
}

.jl_sub_txt {
  color: #5b5a5a;
  margin-top: 5px;
  line-height: 23px
}

.jl_sub_title {
  margin-top: 5px;
  font-size: 15px;
  color: var(--colorDef);
}


.jl_item {
  /*border: 1px #000000 dashed;*/
  padding: 0 8px;
  margin-bottom: 5px;
}

.jl_b0102 {
  color: #545454;
  padding: 8px 23px 12px 23px
}

.pdl6 {
  padding-left: 6px;
}

.pdl8 {
  padding-left: 8px;
}

.pdl10 {
  padding-left: 10px;
}

.pdl12 {
  padding-left: 12px;
}

.pdl14 {
  padding-left: 14px;
}

.jl_img {
  width: 120px;
  height: 165px;
  box-shadow: 1px 0 5px rgb(0 21 41 / 35%) !important;
}

</style>